<template>
    <div>
        <!-- 
            vue中的事件传值分为三种情况
            1、传递实参的情况：实参和形参一致
            2、不传参不写括号的情况:不写括号会默认传递event对象
            3、传递实参并且传递event对象:$event
         -->
        <h1>事件传值</h1>
        <h2>计数器</h2>
        <h2>{{num}}</h2>
        <button @click="incrementN(2)">+2</button>
        <button @click="increment" data-val="3">+3</button>
        <button @click="descrease(3,$event)" data-max="5" v-show="flag">-3</button>

    </div>
</template>

<script>
export default {
    data(){
        return{
            num:30,
            flag:true
        }
    },
    methods:{
        incrementN(val){
           this.num+=val
        },
        increment(e){
           this.num+=~~e.target.getAttribute("data-val")
        },
        descrease(val,e){
            let max=e.target.getAttribute("data-max");
            console.log(this.num,max);
            if(this.num<max){
                this.flag=false
            }
            this.num-=val
           
        }
    }
}
</script>

<style>

</style>